<script setup name="SelectCaiPin">
import {ref, computed} from 'vue';
import useUserStore from '@/store/modules/user'
import {listByPinLei} from '@/api/system/huopin';
import {getByUserId, add as addShouCang, remove as removeShouCang} from '@/api/system/shuocang';
import {getDetail} from '@/api/system/huopin.js';
import {useRouter, useRoute} from 'vue-router';
import Food from '@/assets/images/food.png';
import ShouCangNo from '@/assets/images/shoucang-no.png';
import ShouCangYes from '@/assets/images/shoucang-yes.png';

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const params = ref(route.query)
const caiPinList = ref([])
const allList = ref([])
const onlyShouCang = ref(false)
const onlyShouCangBtnTxt = ref("我的收藏")

console.log("params:")
console.log(params.value);
const tongJi = ref({
  count: params.value.count,
  sum: params.value.sum,
  list: params.value.list
})


function onBuyCountChange() {

  let count = 0;
  let sum = 0.0;
  let list = [];

  for (let item of caiPinList.value) {
    if (item.buyCount > 0) {
      list.push(item);
      count += item.buyCount;
      sum += (item.price * item.buyCount);
    }
  }

  tongJi.value.count = count;
  tongJi.value.sum = sum;
  tongJi.value.list = list;
}

async function getCaiPinList() {

  let rsp = await listByPinLei({cangKuId: params.value.cangKuId, pinLeiId: params.value.pinLeiId});
  caiPinList.value = rsp.data;

  rsp = await getByUserId();

  for (let caiPin of caiPinList.value) {
    caiPin.buyCount = 0;
    if(rsp.data.includes(caiPin.id)){
      caiPin.shouCang = 1;
    } else {
      caiPin.shouCang = 0;
    }
  }

  allList.value = caiPinList.value;

  console.log(params.value);
  if(params.value.list !=null &&params.value.list.length >0){

    for(let item1 of params.value.list) {
      for(let item2 of caiPinList.value) {
        if(item1.huoPinId === item2.id){
          item2.buyCount = item1.buyCount;
        }
      }
    }
  }

}

async function initData(){
  if(params.value.type === 'add'){
    getCaiPinList();
  } else {
    params.value.list = JSON.parse(params.value.list);

    let huoPin = await getDetail(params.value.list[0].huoPinId);
    params.value.pinLeiId = huoPin.data.pinLeiId;
    params.value.pinLeiName = huoPin.data.pinLeiName;
    await getCaiPinList();
    await onBuyCountChange();
  }
}

initData();

function handleOnlyShouCang(){
  onlyShouCang.value = !onlyShouCang.value;
  if(onlyShouCang.value === true){
    caiPinList.value = allList.value.filter(item => item.shouCang === 1);
    onlyShouCangBtnTxt.value = "显示全部";
  } else {
    caiPinList.value = allList.value;
    onlyShouCangBtnTxt.value = "我的收藏";
  }
}

async function addSC(item){
  let rsp = await addShouCang(item.id);
  if(rsp.code === 200){
    item.shouCang = 1;
  }
}

async function removeSC(item){
  let rsp = await removeShouCang(item.id);
  if(rsp.code === 200){
    item.shouCang = 0;
  }
}

function toCommitPage() {
  router.push({
    name: "CommitPage",
    query: {
      info: JSON.stringify({
        id: params.value.id,
        dangKouName: params.value.dangKouName,
        dangKouId: params.value.dangKouId,
        pinLeiId: params.value.pinLeiId,
        pinLeiName: params.value.pinLeiName,
        riQi: params.value.riQi,
        count: tongJi.value.count,
        sum: tongJi.value.sum,
        list: tongJi.value.list
      })
    }
  });
}

</script>

<template>
  <div class="page-body">
    <div class="info-area">
      <el-text size="large">需求单位</el-text>
      <div class="info">
        <div class="info-line" v-if="params.id != null">
          <el-text>订单编号：{{ params.id }}</el-text>
        </div>
        <div class="info-line">
          <el-text>档口名称：{{ params.dangKouName }}</el-text>
        </div>
        <div class="info-line">
          <el-text>品类名称：{{ params.pinLeiName }}</el-text>
        </div>
        <div class="info-line">
          <el-text>供货日期：{{ params.riQi }}</el-text>
        </div>
      </div>
    </div>

    <div class="cai-pin-area">

      <div>
        <el-button type="primary" style="width: 100%" @click="handleOnlyShouCang">{{onlyShouCangBtnTxt}}</el-button>
      </div>
      <el-scrollbar>
        <div class="cai-pin-list">
          <div class="cai-pin-item" v-for="item in caiPinList">
            <div class="cai-pin-item-img">
              <el-image :src="Food"></el-image>
            </div>
            <div class="cai-pin-item-txt">
              <div class="huo-pin-name">{{ item.name }}({{ item.id }})</div>
              <div class="huo-pin-gui-ge">规格：{{ item.guiGe }} | 单位： {{ item.danWei }}</div>
              <div class="huo-pin-pin-pai">品牌：{{ item.pinPai }}</div>
              <div class="huo-pin-price">￥ {{ item.price }}</div>
            </div>

            <div class="cai-pin-item-btn">
              <div class="shang-cang-btn" v-if="item.shouCang === 0">
                <el-image :src="ShouCangNo" @click="addSC(item)"/>
              </div>

              <div class="shang-cang-btn" v-if="item.shouCang === 1">
                <el-image :src="ShouCangYes" @click="removeSC(item)"/>
              </div>

              <div class="buy-btn">
                <el-input-number v-model="item.buyCount" :step="1" step-strictly size="small"
                                 @change="onBuyCountChange"/>
              </div>
            </div>

          </div>
        </div>
      </el-scrollbar>

    </div>

    <div class="tong-ji-area">
      <div class="tong-ji">
        <div class="gou-wu-che-img">
        <span>
          <el-badge :value="tongJi.count">
            <el-image :src="Food" style="width: 30px;height: 30px;"/>
          </el-badge>
        </span>

          <span style="margin-left: 30px;">总计：{{ tongJi.sum }}</span>
        </div>

        <div class="gou-wu-che-count">
          <div></div>
        </div>

        <div>
          <el-button type="primary" round @click="toCommitPage">提交</el-button>
        </div>

      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

$tongJi-area-height: 60px;

.info-area {

  .info {
    margin-top: 20px;
  }

  .info-line {
    padding: 5px;
    font-size: larger;
  }
}


.cai-pin-area {
  margin-top: 30px;
  margin-bottom: $tongJi-area-height;
  .cai-pin-list {
    .cai-pin-item {
      padding: 5px;
      display: flex;
      flex-direction: row; // 主轴方向row横排 | row-reverse倒横排 | column竖排 | column-reverse倒竖排
      flex-wrap: nowrap; // 主轴换行方式：nowrap不换行 | wrap换行且第一行在上方 | wrap-reverse换行且第一行在下方
      justify-content: flex-start; // 主轴上的对齐方式: flex-start左对齐 | flex-end右对齐 | center居中 | space-between两端对齐且项目之间的间隔都相等 | space-around每个项目两侧的间隔相等
      align-items: center; // 副轴对齐方式，flex-start起点对齐 | flex-end终点对齐 | center中点对齐 | baseline基线对齐 | stretch如果项目未设置高度或设为auto，将占满整个容器的高度
      min-height: 100px;
      border-bottom: 1px solid lightgray;
      width: 100%;

      .cai-pin-item-img {
        height: 100px;
        width: 30%;

        .el-image {
          padding: 10px;
          width: 80px;
          height: 80px;
        }
      }

      .cai-pin-item-txt {
        width: 35%;

        .huo-pin-name {
          font-weight: bold;
          font-size: 18px;
        }

        .huo-pin-gui-ge {
          color: gray;
          font-size: 10px;
        }

        .huo-pin-pin-pai {
          color: gray;
          font-size: 10px;
        }

        .huo-pin-price {
          font-weight: bold;
          color: orangered;
        }
      }

      .cai-pin-item-btn {
        height: 100%;
        width: 35%;
        display: flex;
        flex-direction: column; // 主轴方向row横排 | row-reverse倒横排 | column竖排 | column-reverse倒竖排
        flex-wrap: nowrap; // 主轴换行方式：nowrap不换行 | wrap换行且第一行在上方 | wrap-reverse换行且第一行在下方
        justify-content: space-between; // 主轴上的对齐方式: flex-start左对齐 | flex-end右对齐 | center居中 | space-between两端对齐且项目之间的间隔都相等 | space-around每个项目两侧的间隔相等
        align-items: flex-end; // 副轴对齐方式，flex-start起点对齐 | flex-end终点对齐 | center中点对齐 | baseline基线对齐 | stretch如果项目未设置高度或设为auto，将占满整个容器的高度

        .shang-cang-btn {

          .el-image {
            width: 20px;
            height: 20px;
          }
        }
      }

    }

  }
}

.tong-ji-area {
  z-index: 10;
  position: fixed;
  height: $tongJi-area-height;
  bottom: 0;
  width: 100%;
  background-color: white;
}

.tong-ji {
  height: 60px;
  padding: 10px;
  display: flex;
  flex-direction: row; // 主轴方向row横排 | row-reverse倒横排 | column竖排 | column-reverse倒竖排
  flex-wrap: nowrap; // 主轴换行方式：nowrap不换行 | wrap换行且第一行在上方 | wrap-reverse换行且第一行在下方
  justify-content: space-between; // 主轴上的对齐方式: flex-start左对齐 | flex-end右对齐 | center居中 | space-between两端对齐且项目之间的间隔都相等 | space-around每个项目两侧的间隔相等
  align-items: center; // 副轴对齐方式，flex-start起点对齐 | flex-end终点对齐 | center中点对齐 | baseline基线对齐 | stretch如果项目未设置高度或设为auto，将占满整个容器的高度

}
</style>